<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>首页 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" href="../public/css/swiper.min.css" />
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="../mine/css/footer.css">
    <link rel="stylesheet" href="../public/css/reset.css">
    <style>
        /* 覆盖原来的样式 */

        .am-slider-default .am-control-nav {
            width: 100%;
            position: absolute;
            text-align: center;
            margin-bottom: .30rem;
        }

        .am-slider-default {
            margin: 0;
        }

        .am-slider-default .am-control-nav li a.am-active {
            background-color: #e36261;
            cursor: default;
        }

        .swiper-pagination-bullet-active {
            background-color: #f5445d;
        }
    </style>
</head>

<body>
    <div class="header">
        <!-- 顶部导航栏 -->
        <div id="nav">
            <a href="javascript:;">
                <span>郑州</span>
                <img src="../public/images/bottom.png" alt="">
            </a>
            <div id="search">
                <img src="../public/images/search@3x.png" alt="">
                <input type="text" placeholder="输入商家、商品">
            </div>
            <div id="img">
                <a href="javascript:;">
                    <img style="height:0.34rem;margin-top: .3rem;" src="../public/images/xiaoxi@3x.png" alt="">
                </a>

            </div>
        </div>
        <!-- 顶部轮播图 -->
        <div class="swiper-container">
            <!-- <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../public/images/lunbo.png" /></div>
                <div class="swiper-slide"><img src="../public/images/lunbo.png" /></div>
                <div class="swiper-slide"><img src="../public/images/lunbo.png" /></div>
            </div>
            <div class="swiper-pagination"></div> -->
        </div>
    </div>
    <!-- 商品部分 -->
    <div class="bodys">
        <ul>
            <!-- 每日推荐 -->
            <li>
                <div id="goods">
                    <div class="look">
                        <img src="../public/images/star-left@2x.png" alt="">
                        <span>每日推荐</span>
                        <img src="../public/images/star-right@2x.png" alt="">
                    </div>
                    <div class="goodsList every" id="wrapper">
                        <!-- <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </li>
            <!-- 进口商品 -->
            <li>
                <div id="goods">
                    <div class="look">
                        <img src="../public/images/star-left@2x.png" alt="">
                        <span>进口商品</span>
                        <img src="../public/images/star-right@2x.png" alt="">
                    </div>
                    <div class="goodsList jinkou" id="wrappe">
                        <!-- <ul class="clearfix">
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <h3>女童牛仔外套</h3>
                                    <p>￥146.00</p>
                                </a>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </li>
        </ul>
        <!-- 特价商品 -->
        <div class="special">
            <div class="look">
                <img src="../public/images/star-left@2x.png" alt="">
                <span>特价商品</span>
                <img src="../public/images/star-right@2x.png" alt="">
            </div>
            <ul id="ull">
                <li>
                    <div class="List">
                        <div class="brand">
                            <img class="imgs" src="../public/images/chart.png" alt="">
                            <div class="brandName">
                                <h3>屈臣氏</h3>
                                <img src="../public/images/gouwudai@2x.png" alt="">
                                <span>688种商品</span>
                            </div>
                            <a class="enter" href="javascript:;">进入超市</a>
                        </div>
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="List">
                        <div class="brand">
                            <img class="imgs" src="../public/images/chart.png" alt="">
                            <div class="brandName">
                                <h3>屈臣氏</h3>
                                <img src="../public/images/gouwudai@2x.png" alt="">
                                <span>688种商品</span>
                            </div>
                            <a class="enter" href="javascript:;">进入超市</a>
                        </div>
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <img src="../public/images/demo.jpg" alt="时尚牛仔">
                                    <i>￥999.00</i>
                                    <span style="text-decoration:line-through;">￥146.00</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 最新推荐商品 -->
        <div class="newGoods">
            <div class="newTop">
                <ul>
                    <li>
                        <a class="active" href="javascript:;">销量</a>
                        <!-- <img src="../public/images/red@2x.png" alt=""> -->
                    </li>
                    <li>
                        <a href="javascript:;">最新</a>
                        <!-- <img src="../public/images/red@2x.png" alt=""> -->
                    </li>
                    <li>
                        <a href="javascript:;">附近</a>
                        <!-- <img src="../public/images/red@2x.png" alt=""> -->
                    </li>
                </ul>
            </div>
            <!--  -->
            <div class="newBottom">
                <ul>
                    <li>
                        <a class="item">
                            <img src="../public/images/1.jpg" alt="" class="item-top fl">
                            <div class="item-middle fl">
                                <p>屈臣氏</p>
                                <i>☆☆☆☆☆</i>
                                <span>5.0</span>
                                <img src="../public/images/gouwudai@2x.png" alt="" style="height:.26rem">
                                <b>688种商品</b>
                                <div class="map">
                                    <img src="../public/images/dizhi@2x.png" alt="">
                                    <span>郑州市郑东新区CBD丹尼斯六天地</span>
                                </div>
                            </div>
                            <div class="item-bottom fr">
                                <span>266米</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="item">
                            <img src="../public/images/1.jpg" alt="" class="item-top fl">
                            <div class="item-middle fl">
                                <p>屈臣氏</p>
                                <i>☆☆☆☆☆</i>
                                <span>5.0</span>
                                <img src="../public/images/gouwudai@2x.png" alt="" style="height:.26rem">
                                <b>688种商品</b>
                                <div class="map">
                                    <img src="../public/images/dizhi@2x.png" alt="">
                                    <span>郑州市郑东新区CBD丹尼斯六天地</span>
                                </div>
                            </div>
                            <div class="item-bottom fr">
                                <span>266米</span>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a class="item">
                            <img src="../public/images/1.jpg" alt="" class="item-top fl">
                            <div class="item-middle fl">
                                <p>屈臣氏</p>
                                <i>☆☆☆☆☆</i>
                                <span>5.0</span>
                                <img src="../public/images/gouwudai@2x.png" style="height:.26rem" alt="">
                                <b>688种商品</b>
                                <div class="map">
                                    <img src="../public/images/dizhi@2x.png" alt="">
                                    <span>郑州市郑东新区CBD丹尼斯六天地</span>
                                </div>
                            </div>
                            <div class="item-bottom fr">
                                <span>266米</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div id="footer">
        <ul>
            <!-- 主页 -->
            <li>
                <a href="">
                    <img src="../mine/images/home.png">
                    <p>首页</p>
                </a>
            </li>
            <!-- 分类 -->
            <li class="on">
                <a href="">
                    <img src="../mine/images/class_on.png">
                    <p>分类</p>
                </a>
            </li>
            <!-- 附近 -->
            <li class="map">
                <a href="">
                    <img src="../mine/images/map.png">
                    <p>附近商家</p>
                </a>
            </li>
            <!-- 购物车 -->
            <li>
                <a href="">
                    <img src="../mine/images/shopCart.png">
                    <p>购物车</p>
                </a>
            </li>
            <!-- 我的 -->
            <li>
                <a href="">
                    <img src="../mine/images/mine.png">
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </div>

</body>

<script src="../public/js/jquery1.72.js"></script>
<script src="../public/js/rem.js"></script>
<script src="../public/js/template-web.js"></script>
<script src="../public/js/swiper.jquery.min.js"></script>
<script src="./js/home.js"></script>


<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>   -->

<!-- 轮播图渲染页面 -->
<script type="text/html" id="lunbo">
    <div class="swiper-wrapper">
        {{each advList value}}
        <div class="swiper-slide"><img src={{value.advImage}}></div>
        {{/each}}
    </div>
    <div class="swiper-pagination"></div>
</script>
<!-- 每日推荐 -->
<script type="text/html" id="everyday">
    <ul class="clearfix">
        {{each goods1 value i}}
        <li>
            <a href="javascript:;">
                <img src={{value.goods_image}} alt="时尚牛仔">
                <h3>{{value.goods_name}}</h3>
                <p>￥{{value.price}}</p>
            </a>
        </li>
        {{/each}}
    </ul>
</script>
<!-- 进口商品 -->
<script type="text/html" id="jinkou">
    <ul class="clearfix">
        {{each goods2 value i}}
        <li>
            <a href="javascript:;">
                <img src={{value.goods_image}} alt="时尚牛仔">
                <h3>{{value.goods_name}}</h3>
                <p>￥{{value.price}}</p>
            </a>
        </li>
        {{/each}}
    </ul>
</script>
<!-- 特价商品 -->
<script type="text/html" id="tejia">
    {{each store1 value i}}
    <li>
        <div class="List">
            <div class="brand">
                <img class="imgs" src="../public/images/chart.png" alt="">
                <div class="brandName">
                    <h3>{{value.name}}</h3>
                    <img src="../public/images/gouwudai@2x.png" alt="">
                    <span>688种商品</span>
                </div>
                <a class="enter" href="javascript:;">进入超市</a>
            </div>
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="../public/images/demo.jpg" alt="时尚牛仔">
                        <i>￥999.00</i>
                        <span style="text-decoration:line-through;">￥146.00</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../public/images/demo.jpg" alt="时尚牛仔">
                        <i>￥999.00</i>
                        <span style="text-decoration:line-through;">￥146.00</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="../public/images/demo.jpg" alt="时尚牛仔">
                        <i>￥999.00</i>
                        <span style="text-decoration:line-through;">￥146.00</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    {{/each}}
</script>
<script src="../public/js/iscroll.js"></script>
<script type="text/javascript">
//    new IScroll("#wrapper", {
//     scrollX: true,
//     scrollY: false,
//     mouseWheel: true
//     })
</script>
</html>